<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @keyframes load{
            0%{transform:rotate(0)}
            100%{transform:rotate(-360deg)}
        }
        #load{width: 200px;height: 200px;animation:load 1s  linear infinite; transform-origin:center center;}
    </style>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#loading").fadeOut(400);
    </script>
</head>
<body>
<div id="load">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="200px" height="200px"  viewBox="0 0 200 200" xml:space="preserve">
        <g>
            <linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180">
                <stop  offset="0" style="stop-color:#4886CD"/>
                <stop  offset="1" style="stop-color:#9DBFE4"/><!--蓝到浅蓝渐变-->
            </linearGradient>
            <path fill="url(#right)" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/><!--右半圆环-->
            <linearGradient id="left" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="180">
                <stop  offset="0" style="stop-color:#FFFFFF"/>
                <stop  offset="1" style="stop-color:#9DBFE4"/><!--浅蓝到白色渐变-->
            </linearGradient>
            <path fill="url(#left)" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/><!--左半圆环-->
            <circle fill="#4886CD" cx="100" cy="10" r="10"/>
        </g>
    </svg>
</div>
</body>
</html>